<!--用户的徽章-->
<script setup>
import {ElementUtils} from "@/assets/js/ElementUtils";
import Medal from "@/components/common/Medal.vue";
import {onMounted, ref, toRefs, watch} from "vue";
import {useStore} from "vuex";

const props = defineProps({data: Array})
const store = useStore();
const data = toRefs(props).data

const medals = ref();

const request = (data) => {
  const loading = ElementUtils.loading({target: "#user-medals",})
  store.dispatch("User/medalInfoList", {medalId: data}).then(res => {
    medals.value = res;
  }).finally(() => {
    loading.close()
  })
}

onMounted(() => {
  request(data.value)

})

watch(data, (nv) => {
  request(nv)
})
</script>

<template>
  <div id="user-medals">
    <medal v-for="item in medals" :data="item"/>
  </div>
</template>

<style scoped>

</style>